<template>
  <div class=''>
    <el-container  class="layout-container-demo" style="height: 100vh">
      <el-aside :width="!isCollapse ? '180px' : '70px'">
        <sidebar
          :isCollapse="isCollapse"
          ></sidebar>
      </el-aside>

      <el-container>
        <el-header style="height: 40px; line-height: 40px; position: relative;">
          <div style="cursor:pointer;">
            <i class="el-icon-s-fold" style="vertical-align: middle; font-size: 20px;" v-show="!isCollapse" @click="isCollapse = !isCollapse"></i>
            <i class="el-icon-s-unfold" style="vertical-align: middle; font-size: 20px;" v-show="isCollapse" @click="isCollapse = !isCollapse"></i>
          </div>
          <div class="headerendBox">
            <div class="downLoadApp">
              <el-popover
                placement="bottom"
                width="100"
                v-model="popoverShow"
                @show="updateVisible"
                trigger="click">
                <div class="showMessageBox">
                  <div ref="myQrcode" class="img"></div>
                  <div style="margin-top: 5px;">
                    扫码下载
                  </div>
                </div>
                <div class="innerDown" slot="reference" style="cursor:pointer;">
                  下载app
                </div>
              </el-popover>
            </div>
            <div class="innerOpenOrClose">
              <div class="closeOne" style="cursor:pointer;" @click="closeStatus('close')" v-show="isAdminn">
                一键关闭
              </div>
              <div class="openOne" style="cursor:pointer;" @click="closeStatus('open')" v-show="isAdminn">
                一键开启
              </div>
            </div>
            <div class="imgBox" style="cursor:pointer;">
              <img src="@/assets/icons/fullscreen.png" v-show="!fullscreen" alt="" @click="toggleFullscreen">
              <img src="@/assets/icons/quitfull.png" v-show="fullscreen" alt="" @click="toggleFullscreen">
            </div>
            <div>
              <el-dropdown trigger="click">
                <i class="el-icon-setting" style="margin-right: 15px;cursor:pointer;"></i>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>
                    <div @click="userLogOut">
                      退出登录
                    </div>
                  </el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </div>
          </div>
        </el-header>
        <topbar :key="topbarTimmer"/>
        <el-main>
          <router-view/>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import sidebar from './components/sidebar.vue';
import topbar from './components/topbar.vue';
import { userLogOut, userSetComStatus } from '@/request/login';
import QRCode from 'qrcodejs2';
import storages from '@/until/localStorage';
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    sidebar,
    topbar
  },
  data () {
    // 这里存放数据
    return {
      isAdminn: storages.getItem('isAdminn'),
      topbarArr: JSON.parse(storages.getItem('topbarArr')) === null ? [] : JSON.parse(storages.getItem('topbarArr')),
      // ischeckTabsInner: null,
      fullscreen: false,
      isCollapse: false,
      topbarTimmer: new Date().getTime(),
      popoverShow: false,
      qrcode: '',
    }
  },
  // 监听属性 类似于data概念
  computed: {
    watchtopbar(){
      return this.$store.state.topBarArr
    }
  },
  // 监控data中的数据变化
  watch: {

  },
  // 方法集合
  methods: {
    closeStatus(val){
      if (val === 'close') {
        userSetComStatus({status: 0}).then(res => {
          if (res.code === '200') {
            this.$message({
              type: 'success',
              message: '关闭成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      } else {
        userSetComStatus({status: 1}).then(res => {
          if (res.code === '200') {
            this.$message({
              type: 'success',
              message: '开启成功'
            })
          } else {
            this.$message({
              type: 'error',
              message: res.message
            })
          }
        })
      }
    },
    updateVisible(){
      this.popoverShow = true
      // 清除上一次的二维码
      if (this.$refs.myQrcode) {
        this.$refs.myQrcode.innerHTML = ''; // 清除二维码方法
      }
      // 生成二维码(这里有个坑，一定要在 new关键字前面用 等于号，赋给一个变量，否则vue运行会报错)
      this.qrcode = new QRCode(this.$refs.myQrcode, {
        width: 100,  // 二维码宽度 （不支持100%）
        height: 100, // 二维码高度（不支持100%）
        text: `${this.$downUrl}crm.apk`, // 后端返回的二维码地址，这里暂时写死
        render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
      });
      
    },
    // 全屏
    toggleFullscreen(){
      let element = document.documentElement

      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen()
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen()
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen()
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen()
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen()
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen()
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen()
        } else if (element.msRequestFullscreen) {
          // IE11

          element.msRequestFullscreen()
        }
      }

      this.fullscreen = !this.fullscreen
    },
    userLogOut () {
      userLogOut().then(res => {
        if (res.code === '200') {
          this.$store.commit('clearStoreData')
          storages.clear()
          this.$router.push('/')
        }
      }).catch(err => {
        this.$message({
          message: '服务器忙~',
          type: 'warning'
        })
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    // 退出全屏后要执行的动作
    window.onresize = ()=>{
      let isFull = document.mozFullScreen||
      document.fullScreen ||
      //谷歌浏览器及Webkit内核浏览器
      document.webkitIsFullScreen ||
      document.webkitRequestFullScreen ||
      document.mozRequestFullScreen ||
      document.msFullscreenEnabled
      if(isFull === undefined) {
        this.fullscreen = false;
      }
    }
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang='scss' scoped>
  //@import url(); 引入公共css类
.headerendBox {
  width: auto;
  display: flex;
}
.downLoadApp {
  width: 100px;
  color: $color-primary;
  .innerDown {
    width: 90px;
    height: 100%;
  }
}
.showMessageBox {
  width: 100px;
  height: 120px;
  margin: 0 auto;
  text-align: center;
}
.innerOpenOrClose {
  display: flex;
  margin-right: 30px;
  .closeOne {
    width: fit-content;
    color: #fff;
    background: #e40303;
    padding: 0 10px;
    border-radius: 10px;
  }
  .openOne {
    margin-left: 10px;
    width: fit-content;
    color: #fff;
    background: $color-primary;
    padding: 0 10px;
    border-radius: 10px;
  }
}
.imgBox {
  width: 20px;
  height: 100%;
  img {
    transform: translate(-10px,0);
    width: 15px;
    height: 15px;
  }
}
.el-scrollbar {
  height: 100vh;
}
.layout-container-demo .el-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0,21,41,.08);
  background: #fff;
}
.layout-container-demo .el-aside {
  box-shadow: 4px 0 6px rgba(0, 21, 41, .35);
}
.layout-container-demo .el-menu {
  border-right: none;
}
.el-header {
  padding: 0 10px;
}
.el-main {
  padding: 10px 15px;
}
.layout-container-demo .toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  right: 20px;
}
</style>
